<template>
	<view @touchmove.stop.prevent="moveHandle">
		<view v-if="showStatus">
			<view class="mask-show mask-show-wechat"></view>
			<view class="w-login">
				<view class="w-title flex align-center justify-center">
					<image :src="config.site_logo?config.site_logo:''" />
					<view class="w-title-desc">{{config.site_name?config.site_name:'填表统计'}} 申请获取你的昵称、头像</view>
				</view>
				<view class="w-content flex align-center">
					<label class="w-label">头像</label>
					<button class="w-button in-content flex align-center justify-end no-b-button"
						open-type="chooseAvatar" hover-class="none" :plain="true" @chooseavatar="chooseavatar">
						<text class="set-img-title">点击设置头像</text>
						<image class="headimg" :src="headimg?headimg:''" v-if="headimg"></image>
					</button>
					<!-- <view class="in-content flex justify-end">
					</view> -->
				</view>
				<view class="w-content flex align-center">
					<label class="w-label">昵称</label>
					<view class="in-content">
						<input type="nickname" v-model="nickname" class="in-input" maxlength="32" placeholder="请选择或输入昵称"
						 @change="nicknameBlur"	confirm-type="down" placeholder-class="pl-class">
					</view>
				</view>
				<view class="login-btn flex">
					<view class="login-list flex align-center j-end">
						<view class="list-item" @tap.stop="saveShowStatus(false)">拒绝</view>
					</view>
					<view class="login-list flex align-center j-start">
						<view class="list-item confirm" @tap.stop="loginWechat(false)">允许</view>
					</view>
				</view>
				<view class="m-bottom"></view>
				<w-compress ref='wCompress_wechatLogin' init_canvas_id="wCompress_wechatLogin" />
			</view>
		</view>
	</view>
</template>

<script>
	import WCompress from '@/components/w-compress/w-compress.vue';
	import Upload from "@/utils/fileupload/upload.js";
	export default {
		components: {
			WCompress
		},
		data() {
			return {
				config: {},
				showStatus: false,
				headimg: '',
				qnHeadimg: '',
				nickname: ''
			}
		},
		props: {
			hideTabbar: {
				type: Boolean,
				default: false
			}
		},
	 

		mounted() {
			var config = this.myconfig;
			this.config = config;

		},
		methods: {
			async loginWechat() {
				var that = this;
				if (!that.nickname || that.nickname == '') {
					that.$api.msg('请选择或填写昵称');
					return;
				}
				if (!that.headimg || that.headimg == '') {
					that.$api.msg('请选择或上传头像');
					return;
				}
				if (!that.qnHeadimg || that.qnHeadimg == '') {
					uni.setStorageSync('setUploadPath', 'headimg');
					var fileRes = await Upload.uploadImageToQiniuH5([{
						path: that.headimg
					}])
					uni.hideLoading()
					if (fileRes.list && fileRes.list.length > 0) {
						that.qnHeadimg = fileRes.list[0];
					} else {
						that.$api.msg('头像上传失败');
						return
					}
				}
				that.$api.loadingMsg('正在登录');
				uni.login({
					success(e) {
						that.$http.post('login/wechatLogin', {
							nickname: that.nickname,
							headimg: that.qnHeadimg,
							code: e.code,
							recomm_user_id: 0
						}).then(res => {
							if (res.code == 1) {
								if (that.hideTabbar) {
									uni.showTabBar({}); //显示tabbar
								}
								that.loginSuccessFunc(res.data);
							} else {
								that.$api.msg(res.msg);
							}
						})
					},
					fail(e) {
						uni.hideLoading();
						that.$api.msg('获取登录CODE失败');
					}
				})
			},
			saveShowStatus(status, forecShow = false) {

				var that = this;

				if (status == true) {
					var sys_config = this.$api.getSystemConfig('base');
					if (sys_config.default_headimg) {
						this.headimg = sys_config.default_headimg;
						this.qnHeadimg = sys_config.default_headimg;
					} else {
						this.headimg = '';
						this.qnHeadimg = '';
					}

					if (forecShow == true) {
						var userInfo = that.$api.checkUserInfo();
						if (userInfo) {
							that.headimg = userInfo.avatar;
							that.qnHeadimg = userInfo.base_avatar;
							that.nickname = userInfo.nickname;
						}
						//forecShow 强制显示授权框
						if (that.hideTabbar) {
							uni.hideTabBar({})
						}
						that.showStatus = true;
						return;
					}
					that.$api.loadingMsg('');
					uni.login({
						success(e) {
							//检测之前是不是已经注册过了 注册过直接登录
							that.$http.post('login/checkLogin', e).then(res => {
								if (res.code == 1) {
									that.loginSuccessFunc(res.data);
								} else {
									if (res.data && res.data.showLogin) {
										if (that.hideTabbar) {
											uni.hideTabBar({})
										}
										that.showStatus = true;
									} else {
										that.$api.msg(res.msg);
									}

								}
							})
						},
						fail(e) {
							uni.hideLoading();
							that.$api.msg('获取登录CODE失败');
							that.$emit('callback', {
								code: 0,
								data: e
							})
						}
					})
				} else {
					if (that.hideTabbar) {
						uni.showTabBar({})
					}
					that.showStatus = false;
				}
			},
			loginSuccessFunc(data) {
				var that = this;
				that.saveShowStatus(false);
				if (data.userInfo) {
					that.$api.checkUserInfo('set', data.userInfo); //缓存用户信息
				}
				if (data.jwt_token) {
					that.$api.jwtToken('set', data);
					that.$emit('callback', {
						code: 1
					})
				} else {
					that.$api.msg('返回登录信息失败');
				}
			},
			chooseavatar(e) {
				var that = this;
				var avatarUrl = e.detail.avatarUrl;
				if (avatarUrl) {
					that.imgCompress(avatarUrl).then(res => {
						if (res) {
							that.headimg = avatarUrl;
							that.qnHeadimg = '';
						} else {
							that.$api.msg('获取头像失败');
						}
					}).catch(err => {
						that.$api.msg('获取头像失败');
						console.log('error', err)
					});
				}

			},
			async imgCompress(tempFilePaths, type) {
				var that = this;
				that.$api.loadingMsg('正在压缩头像');
				let compressImgs = [];
				let results = [];
				return new Promise((resolve, reject) => {
					// #ifndef H5
					that.$refs.wCompress_wechatLogin.start(tempFilePaths, {}).then(res => {
						uni.hideLoading();
						resolve(res);
					}).catch(err => {
						uni.hideLoading();
						that.$api.msg('压缩头像失败');
						/* console.log('compressImgs error',err)
						reject(err); */
					})
					// #endif
				})
			},
			nicknameBlur(e) {
				var nickname = '';
				if (e.detail.value) {
					nickname = e.detail.value;
				}
				this.nickname = nickname;
				console.log("昵称" + e.detail.value)
			},

		}
	}
</script>

<style lang="scss">
	.mask-show-wechat {
		z-index: 99991;
	}

	.w-button {
		width: 100%;
		border: none !important;
		height: 100%;
		padding: 0 !important;
	}

	.w-login {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		background: #ffffff;
		z-index: 99992;
		border-radius: 20rpx 20rpx 0 0;
		padding: 30rpx;

		.pl-class {
			color: #919191;
			font-size: 26rpx;
		}

		.login-btn {
			margin-top: 50rpx;

			.login-list {
				width: 50%;
				height: 100rpx;

				.list-item {
					width: 180rpx;
					height: 60rpx;
					background: #F2F2F2;
					color: #40A881;
					text-align: center;
					border-radius: 10rpx;
					font-size: 26rpx;
					line-height: 60rpx;
				}

				.refuse {
					margin-right: 30rpx;
				}

				.confirm {
					background: #05C160;
					color: #ffffff;
					margin-left: 30rpx;
				}
			}
		}

		.w-content {
			position: relative;
			height: 100rpx;
			border-bottom: 2rpx solid #f5f4f4;

			.set-img-title {
				position: absolute;
				color: #919191;
				font-size: 26rpx;
				right: 88rpx;
			}

			.w-label {
				width: 100rpx;
			}

			.in-content {
				width: 580rpx;

				.headimg {
					height: 70rpx;
					width: 70rpx;
					border-radius: 50%;
				}

				.in-input {
					width: 100%;
					height: 100%;
					text-align: right;
				}
			}

		}

		.w-title {
			height: 80rpx;
			border-bottom: 2rpx solid #f5f4f4;
			padding-bottom: 30rpx;

			image {
				width: 50rpx;
				height: 50rpx;
			}

			.w-title-desc {
				font-size: 26rpx;
				margin-left: 10rpx;
			}
		}

		.m-bottom {
			height: 50rpx;
		}
	}
</style>